<template>
    <div>
        <input
            :value="value"
            :type="type"
            :placeholder="placeholder"
            :style="{
                width: w + 'px',
                height: h + 'px',
                borderRadius: round ? (h / 2 + 'px') : '3px',
                border,
                outline: 'none',
                textIndent: indent + 'px',
            }"
            @input="handleInput($event)"
        />
    </div>
</template>

<script>
    export default {
        name: "KuInput",

        props: {
            // 值
            value: {
                type: String,
                default: ""
            },

            // 类型
            type: {
                type: String,
                default: "text"
            },

            // 宽度
            w: {
                type: Number,
                default: 180
            },

            // 高度
            h: {
                type: Number,
                default: 28
            },
            
            // 描述文字
            placeholder: {
                type: String,
                default: ""
            },

            // 圆角
            round: {
                type: Boolean,
                default: false
            },

            // 边框
            border: {
                type: String,
                default: "1px #e6e6e6 solid"
            },

            // 缩进
            indent: {
                type: Number,
                default: 10
            },
        },

        methods: {
            // 绑定 input 事件
            handleInput(e) {
                this.$emit("input", e.target.value)
            },
        },
    }
</script>
